<template>
  <view>
    <view class="messageCenter">
      <view
          v-for="(item, index) in list"
          :key="index"
          class="msg"
          @click="toUrl(`/pages/home/messageDetails?id=${item.id}`, item)"
      >
        <view class="msg-left">
          <image :src="iconArr[item.type]"/>
          <view class="msg-content">{{ item.content }}</view>
        </view>
        <view class="msg-date">{{ item.date }}</view>
        <view v-if="item.warn" class="wran"></view>
      </view>
    </view>
    <view v-if="!list.length" class="no"> --暂无消息提醒--</view>
    <zy-modal></zy-modal>
  </view>
</template>

<script>
import {queryByUserPhoneMessageList} from "@/api/login.js";

export default {
  data() {
    return {
      iconArr: [
        "https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/msg-journey-icon.png",
        "https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/msg-assemble-icon.png",
        "https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/msg-inform-icon.png",
      ],
      list: [],
      userinfo: null,
      page: 1,
      isFinished: false,
    };
  },
  onLoad(data) {
    console.log("输出", data);
    this.userinfo = uni.getStorageSync("userinfo");
    this.init();
    this.$event.on("changeNewsInfo", () => {
      this.page = 1;
      this.list = [];
      this.isFinished = false;
      this.init();
    });
  },
  onReachBottom() {
    if (this.isFinished) {
      return;
    }
    this.page++;
    this.init();
  },
  methods: {
    init() {
      this.isFinished = false;
      queryByUserPhoneMessageList({
        phone: this.userinfo.phone,
        page: this.page,
        size: 20,
      }).then((res) => {
        let {records, total} = res;
        records.forEach((item) => {
          (item.type = item.messageAssemble ? item.messageAssemble.type : 1),
              (item.date = item.createTime);
          item.warn = !item.isRead;
          item.content =
              item.messageAssemble && item.messageAssemble.type == 2
                  ? "消息通知"
                  : item.messageAssemble && item.messageAssemble.type == 0
                      ? "行程通知"
                      : "集合通知";
        });
        this.list.push(...records);
        if (this.list.length === total) {
          this.isFinished = true;
        }
      });
    },
    toUrl(url, item) {
      if (!url) return;
      uni.setStorageSync("newsinfo", item);
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style>
page {
  min-height: 100vh;
  background: rgba(235, 236, 237, 1);
}
</style>
<style lang="scss" scoped>
.no {
  padding: 40rpx 0;
  text-align: center;
  font-size: 24rpx;
}

.messageCenter {
  display: flex;
  flex-direction: column;
  width: 690rpx;
  margin: 20rpx auto;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 12px -3px rgba(0, 0, 0, 0.25);

  .msg {
    width: calc(100% - 60rpx);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 32rpx;
    color: rgba(51, 51, 51, 1);
    position: relative;
    padding: 30rpx 0;
    margin: 0 auto;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(238, 238, 238, 1);

    image {
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;
    }

    &:last-child {
      margin-bottom: 40rpx;
    }
  }

  .msg-left {
    display: flex;
    align-items: center;
  }

  .msg-date {
    /** 文本1 */
    font-size: 24rpx;
    color: rgba(153, 153, 153, 1);
  }

  .wran {
    position: absolute;
    right: 0;
    top: 30rpx;
    width: 24rpx;
    height: 24rpx;
    border-radius: 50vh;
    opacity: 1;
    background: rgba(237, 94, 94, 1);
  }
}
</style>
